<template>
  <div>
   <Header></Header>
        <div class="block">
          <el-timeline>
            <el-timeline-item :timestamp="comment.createdTime" placement="top" v-for="comment in comments">
              <el-card>
                <h4>
                  <router-link :to="{name: 'Film', params: {id: comment.filmId}}">
                    {{ comment.name }}
                  </router-link>
                  </h4>
                <p>评论: {{comment.content}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
    </div>

</template>

<script>
import Header from "../components/Header";
export default {
  name: "MyCollection.vue",
  components: {Header},
  data() {
    return {
      user:this.$store.getters.getUser,
      reverse: true,
      comments: {},
    };
  },
  methods:{
    unCollection(id){
      const _this = this
      _this.$axios.post("/comment/delete/"+id).then(res => {
        if(res.data.data===true){
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          });
          const userId=this.user.id
          this.$axios.post('/comment/getMyComment/' + userId).then(res => {
            const comments = res.data.data
            this.comments=comments
          })
        }else{
          this.$message.error("取消收藏失败");
        }
      })
    }
  },
  created() {
    const userId=this.user.id
    //异步请求查询
    if(userId){
      this.$axios.post('/comment/getMyComment/' + userId).then(res => {
        const comments = res.data.data
        this.comments=comments

      })
    }
  }
};
</script>
<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>